<template>
  <div class="home">
    <div class="content">
      <!-- 头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location-o"/>
          <span>每日外卖</span>
          <van-icon name="arrow"/>
        </div>
      </div>
      <!-- 内容 -->
      <div class="main">
        <div class="main-bg">
          <div class="search">
            <input type="text">
            <div class="search-text">搜索</div>
          </div>

          <div class="sort">
            <div class="big-sort">
              <div v-for="(item,index) in big_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{ item.name }}
              </div>
            </div>
            <div class="small-sort">
              <div v-for="(item,index) in small_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{ item.name }}
              </div>
            </div>

            <span class="iconfont icon-fruit-icons"></span>
          </div>
        </div>

        <van-tabs v-model:active="active" class="van-tabs">
          <van-tab v-for="(item,index) in content_nav_list" :key="index"
                   :title="item.tab">
            <nav-list :navList="item.data"></nav-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import {reactive, toRefs, ref, onMounted} from "vue";
import NavList from './components/NavList.vue'
import axios from 'axios'
import {getApiHomeData} from '@/api/api'

export default {
  name: "Home",
  components: {
    Footer,
    NavList
  },
  setup() {
    let homeData = reactive({
      big_sort: [],
      small_sort: [],
      content_nav_list: [],
    })

    const getHomeData = () => {
      // mock.js
      // axios.get('/home/getHomeData').then(res => {
      //   console.log('res', res.data)
      //   const { code, data, message} = res.data
      //   if(code == 200){
      //     homeData.small_sort = data.small_sort
      //     homeData.big_sort = data.big_sort
      //     homeData.centent_nav_list = data.centent_nav_list
      //   }
      // })

      getApiHomeData().then(res => {
        console.log('res',res)
        const {small_sort,big_sort,content_nav_list} = res
        homeData.small_sort = small_sort
        homeData.big_sort = big_sort
        homeData.content_nav_list = content_nav_list
      })
    }

    onMounted(() => {
      getHomeData()
    })

    const active = ref(0)

    return {
      ...toRefs(homeData),
      active
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  font-size: 12px;

  .content {
    flex: 1;
    overflow-y: auto;

    .header {
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;

      .text {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }

      .location {
        display: flex;
        align-items: center;
        font-size: 14px;

        span {
          margin: 0 5px;
        }
      }
    }

    .main {
      margin-top: -20px;

      .main-bg {
        background-image: linear-gradient(#fff, #f5f5f5);
        padding: 10px 20px;
        border-radius: 20px 20px 0 0;

        .search {
          position: relative;

          input {
            width: 100%;
            height: 30px;
            border: 1px solid #ffc400;
            border-radius: 20px;
          }

          .search-text {
            position: absolute;
            width: 50px;
            height: 32px;
            line-height: 32px;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #ffc400;
            border-radius: 16px;
            font-size: 14px;
            text-align: center;
          }
        }

        .sort {
          padding: 20px 0;

          .big-sort {
            display: flex;

            div {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-flow: column;

              .icon {
                height: 50px;
                width: 50px;
                margin-bottom: 5px;
              }
            }
          }

          .small-sort {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;

            div {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-flow: column;
              width: 20%;
              padding: 5px 0;

              .icon {
                height: 30px;
                width: 30px;
                margin-bottom: 10px;
              }
            }
          }
        }
      }

      .van-tabs {
        padding: 0 20px 10px;
      }
    }
  }
}

/deep/ .van-tabs__wrap {
  border-radius: 10px;
}
</style>
